<script setup lang="ts">
import { ref } from "vue";
import ROSLIB from "roslib";

const serviceName = "/add_two_ints";
const ros = new ROSLIB.Ros({ url: "ws://localhost:9090" });
const serviceClient = new ROSLIB.Service({
  ros,
  name: serviceName,
  serviceType: "rospy_tutorials/AddTwoInts"
});

const paramA = ref<number>(0);
const paramB = ref<number>(0);
const message = ref<string>("");
// const status = ref<string>("");

const callService = () => {
  const request = new ROSLIB.ServiceRequest({
    a: paramA.value,
    b: paramB.value
  });

  serviceClient.callService(request, (result: any) => {
    message.value = result.sum;
  });
};
</script>
<template>
  <div>
    <h2>Service Client</h2>
    <p>Input for AddTwoInts Service:</p>
    <p>
      <input
        type="number"
        v-model.number="paramA"
        placeholder="Enter Number 1 Here"
      />
      <input
        type="number"
        v-model.number="paramB"
        placeholder="Enter Number 2 Here"
      />
      <button @click="callService">Call Service</button>
    </p>
    <h3>Response Received</h3>
    <p>{{ message }}</p>
  </div>
</template>
<style scoped>
input {
  margin: 0 5px;
  width: 15%;
}
</style>
